<template>
  <div class="container-fluid p-4">
    <!-- 考核统计 -->
    <el-row :gutter="20" class="mb-4">
      <el-col :span="24">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <h5 class="mb-0">考核统计</h5>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="d-flex align-items-center">
                <div class="flex-shrink-0">
                  <div
                    class="bg-primary bg-gradient text-white rounded-circle p-3"
                  >
                    <i class="bi bi-clipboard-check"></i>
                  </div>
                </div>
                <div class="flex-grow-1 ms-3">
                  <h6 class="mb-1">已完成考核</h6>
                  <h4 class="mb-0">8</h4>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="d-flex align-items-center">
                <div class="flex-shrink-0">
                  <div
                    class="bg-warning bg-gradient text-white rounded-circle p-3"
                  >
                    <i class="bi bi-hourglass-split"></i>
                  </div>
                </div>
                <div class="flex-grow-1 ms-3">
                  <h6 class="mb-1">待完成考核</h6>
                  <h4 class="mb-0">3</h4>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="d-flex align-items-center">
                <div class="flex-shrink-0">
                  <div
                    class="bg-success bg-gradient text-white rounded-circle p-3"
                  >
                    <i class="bi bi-award"></i>
                  </div>
                </div>
                <div class="flex-grow-1 ms-3">
                  <h6 class="mb-1">平均分数</h6>
                  <h4 class="mb-0">85.6</h4>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="d-flex align-items-center">
                <div class="flex-shrink-0">
                  <div
                    class="bg-info bg-gradient text-white rounded-circle p-3"
                  >
                    <i class="bi bi-graph-up"></i>
                  </div>
                </div>
                <div class="flex-grow-1 ms-3">
                  <h6 class="mb-1">能力提升</h6>
                  <h4 class="mb-0">+12%</h4>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!-- 待完成考核 -->
    <el-row :gutter="20" class="mb-4">
      <el-col :span="24">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <h5 class="mb-0">待完成考核</h5>
            </div>
          </template>
          <el-table :data="pendingAssessments" style="width: 100%">
            <el-table-column prop="name" label="考核名称"></el-table-column>
            <el-table-column prop="type" label="类型">
              <template #default="scope">
                <el-tag
                  :type="
                    scope.row.type === '理论考试'
                      ? 'primary'
                      : scope.row.type === '实操考核'
                        ? 'success'
                        : 'info'
                  "
                >
                  {{ scope.row.type }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="deadline" label="截止时间"></el-table-column>
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                <el-tag type="warning">{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button
                  type="primary"
                  size="small"
                  @click="startAssessment(scope.row)"
                  >开始考核
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!-- 历史考核记录 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="never">
          <template #header>
            <div
              class="card-header d-flex justify-content-between align-items-center"
            >
              <h5 class="mb-0">历史考核记录</h5>
              <div class="d-flex">
                <el-select
                  v-model="historyTypeFilter"
                  placeholder="全部类型"
                  size="small"
                  class="me-2"
                >
                  <el-option label="全部类型" value="all"></el-option>
                  <el-option label="理论考试" value="理论考试"></el-option>
                  <el-option label="实操考核" value="实操考核"></el-option>
                  <el-option label="案例分析" value="案例分析"></el-option>
                </el-select>
                <el-select
                  v-model="historyTimeFilter"
                  placeholder="最近三个月"
                  size="small"
                >
                  <el-option label="最近三个月" value="3months"></el-option>
                  <el-option label="最近半年" value="6months"></el-option>
                  <el-option label="最近一年" value="1year"></el-option>
                  <el-option label="全部时间" value="all"></el-option>
                </el-select>
              </div>
            </div>
          </template>
          <el-table :data="filteredHistoryAssessments" style="width: 100%">
            <el-table-column prop="name" label="考核名称"></el-table-column>
            <el-table-column prop="type" label="类型">
              <template #default="scope">
                <el-tag
                  :type="
                    scope.row.type === '理论考试'
                      ? 'primary'
                      : scope.row.type === '实操考核'
                        ? 'success'
                        : 'info'
                  "
                >
                  {{ scope.row.type }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="completionTime"
              label="完成时间"
            ></el-table-column>
            <el-table-column prop="score" label="得分"></el-table-column>
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                <el-tag
                  :type="scope.row.status === '通过' ? 'success' : 'danger'"
                  >{{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button
                  type="info"
                  size="small"
                  plain
                  @click="viewAssessmentDetail(scope.row)"
                  >查看详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container mt-4">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="historyAssessments.length"
              :page-size="10"
              :current-page="1"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { ElMessage } from "element-plus";

// 考核统计数据
const assessmentStats = ref([
  {
    title: "总考核数",
    value: 120,
    icon: "i-bi-journal-check",
    color: "text-primary",
  },
  {
    title: "已完成",
    value: 100,
    icon: "i-bi-check-circle",
    color: "text-success",
  },
  {
    title: "待完成",
    value: 20,
    icon: "i-bi-hourglass-split",
    color: "text-warning",
  },
  { title: "平均得分", value: 85, icon: "i-bi-award", color: "text-info" },
]);

// 待完成考核数据
const pendingAssessments = ref([
  {
    id: 1,
    name: "高级护理实践考核",
    type: "实操考核",
    deadline: "2023-07-30",
    status: "未开始",
  },
  {
    id: 2,
    name: "医院感染控制理论",
    type: "理论考试",
    deadline: "2023-07-25",
    status: "未开始",
  },
  {
    id: 3,
    name: "沟通技巧案例分析",
    type: "案例分析",
    deadline: "2023-07-20",
    status: "未开始",
  },
]);

// 历史考核数据
const historyAssessments = ref([
  {
    id: 101,
    name: "基础护理理论知识测试",
    type: "理论考试",
    completionTime: "2023-06-10",
    score: 92,
    status: "通过",
  },
  {
    id: 102,
    name: "无菌操作技能评估",
    type: "实操考核",
    completionTime: "2023-05-25",
    score: 85,
    status: "通过",
  },
  {
    id: 103,
    name: "护理文书书写规范测试",
    type: "案例分析",
    completionTime: "2023-05-15",
    score: 78,
    status: "通过",
  },
  {
    id: 104,
    name: "急救流程模拟演练",
    type: "实操考核",
    completionTime: "2023-05-05",
    score: 65,
    status: "未通过",
  },
]);

// 历史考核筛选条件
const historyTypeFilter = ref("all");
const historyTimeFilter = ref("3months");

const filteredHistoryAssessments = computed(() => {
  let filtered = historyAssessments.value;

  if (historyTypeFilter.value !== "all") {
    filtered = filtered.filter((item) => item.type === historyTypeFilter.value);
  }

  // 实际项目中，这里需要根据 historyTimeFilter.value 进行日期过滤
  // 示例中简化处理，只做类型过滤

  return filtered;
});

const startAssessment = (assessment) => {
  ElMessage.success(`开始考核: ${assessment.name}`);
  // 实际项目中，这里会跳转到考核页面
};

const viewAssessmentDetail = (assessment) => {
  ElMessage.info(`查看考核详情: ${assessment.name}`);
  // 实际项目中，这里会跳转到考核详情页面
};
</script>
<style scoped>
.assessment-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--el-card-border-color);
  box-sizing: border-box;
}

.stat-card .el-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat-icon {
  font-size: 2.5rem;
}

.stat-value {
  font-size: 2rem;
  font-weight: bold;
}

.stat-title {
  font-size: 1rem;
  color: #6c757d;
}

.el-table {
  margin-top: 20px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* Bootstrap Icons compatibility */
[class^="i-bi-"] {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.i-bi-journal-check {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-journal-check' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M10.854 6.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 8.793l2.646-2.647a.5.5 0 0 1 .708 0z'/%3E%3Cpath d='M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-.5v.5a.5.5 0 0 1-1 0V6h-.5a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-.5v.5a.5.5 0 0 1-1 0V9h-.5a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-.5v.5a.5.5 0 0 1-1 0v-.5h-.5a.5.5 0 0 1 0-1H1z'/%3E%3C/svg%3E");
}

.i-bi-check-circle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-check-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z'/%3E%3C/svg%3E");
}

.i-bi-hourglass-split {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-hourglass-split' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 15a.5.5 0 1 1 0-1h11a.5.5 0 1 1 0 1h-11zm2-4a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm2-3a.5.5 0 0 1 .5-.5h2a.5.5 0 1 1 0 1h-2a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zM2.5 1a.5.5 0 1 0 0 1h11a.5.5 0 1 0 0-1h-11z'/%3E%3Cpath d='M2 1.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0 9a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z'/%3E%3Cpath d='M8 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'/%3E%3C/svg%3E");
}

.i-bi-award {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-award' viewBox='0 0 16 16'%3E%3Cpath d='M9.669.864 8 0 6.331.864 4.735 3.059 2.913 2.424 2.882 4.356 1.541 5.686 2.5 7.56 1.913 9.656 3.61 9.932 4.735 11.94l1.602 2.124L8 16l1.602-2.124 1.125-2.018 1.707-.276 1.087-2.094 1.354-1.354L13.118 5.686l-1.333-1.927L9.669.864zm-.017 1.132L8 1.166l-1.652.83-.8 1.46-1.415-.493-.04.244-1.16 1.16-.702 1.35 1.086 1.086-.286 1.707 1.707.286.8 1.46 1.415.493.04-.244 1.16-1.16.702-1.35-1.086-1.086.286-1.707-1.707-.286-.8-1.46z'/%3E%3C/svg%3E");
}

.i-bi-play-circle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-play-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5V5.5a.5.5 0 0 1 .271-.445z'/%3E%3C/svg%3E");
}

.i-bi-info-circle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-info-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'/%3E%3C/svg%3E");
}
</style>
